<div class="row-content am-cf">
    <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
            <div class="widget am-cf">
                <form id="my-form" class="am-form tpl-form-line-form" enctype="multipart/form-data" method="post">
                    <div class="widget-body">
                        <fieldset>
                            <div class="widget-head am-cf">
                                <div class="widget-title am-fl">添加优惠券</div>
                            </div>
                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">优惠券名称 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <input type="text" class="tpl-form-input" name="coupon[name]"
                                           value="" placeholder="请输入优惠券名称" required>
                                    <small>例如：满100减10</small>
                                </div>
                            </div>

                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">代金券/优惠券 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <label class="am-radio-inline">
                                        <input type="radio" name="coupon[is_daijin]" value="1" data-am-ucheck onchange="changedaijin(1)">
                                        代金券
                                    </label>
                                    <label class="am-radio-inline">
                                        <input type="radio" name="coupon[is_daijin]" value="0" data-am-ucheck checked onchange="changedaijin(0)">
                                        优惠券
                                    </label>
                                    <div class="help-block">
                                        <small></small>
                                    </div>
                                </div>
                            </div>

                            <div id="djq" style="display: none">
                                <div class="am-form-group">
                                    <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">指定商品/满赠 </label>
                                    <div class="am-u-sm-9 am-u-end">
                                        <label class="am-radio-inline">
                                            <input type="radio" name="coupon[dj_type]" value="1" data-am-ucheck onchange="changedjtype(1)">
                                            指定商品
                                        </label>
                                        <label class="am-radio-inline">
                                            <input type="radio" name="coupon[dj_type]" value="0" data-am-ucheck checked onchange="changedjtype(0)">
                                            订单满赠
                                        </label>
                                        <div class="help-block">
                                            <small>可选择购买指定商品赠送代金券 或 订单金额满赠代金券</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="am-form-group" id="dj_goods" style="display: none">
                                    <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">商品列表 </label>
                                    <div class="am-u-sm-9 am-u-end">
                                        <select name="coupon[goods_id]"
                                                data-am-selected="{searchBox: 1, btnSize: 'sm',
                                             placeholder:'请选择关联商品', maxHeight: 400}">
                                            <option value=""></option>
                                            <?php if (isset($goods_list)): foreach ($goods_list as $goods): ?>
                                                <option value="<?= $goods['goods_id'] ?>">
                                                    　　　<?= $goods['goods_name'] ?> </option>
                                            <?php endforeach; endif; ?>
                                        </select>
                                    </div>
                                </div>
                                <div class="am-form-group" id="dj_order" style="display: none">
                                    <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">满赠订单金额 </label>
                                    <div class="am-u-sm-9 am-u-end">
                                        <input type="number" min="0.00" class="tpl-form-input" name="coupon[order_money]"
                                               value="" placeholder="请输入满赠订单金额" required>
                                    </div>
                                </div>
                            </div>

                            <div>
                                <div class="am-form-group">
                                    <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">是否前台显示 </label>
                                    <div class="am-u-sm-9 am-u-end">
                                        <label class="am-radio-inline">
                                            <input type="radio" name="coupon[is_show]" value="1" data-am-ucheck>
                                            允许
                                        </label>
                                        <label class="am-radio-inline">
                                            <input type="radio" name="coupon[is_show]" value="0" data-am-ucheck checked>
                                            不允许
                                        </label>
                                        <div class="help-block">
                                            <small>是否允许在前台展示该优惠券</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="am-form-group">
                                    <label class="am-u-sm-3  am-u-lg-2 am-form-label form-require">选择用户 </label>
                                    <div class="am-u-sm-9 am-u-end">
                                        <div class="widget-become-goods am-form-file am-margin-top-xs">
                                            <button type="button"
                                                    class="j-selectUser upload-file am-btn am-btn-secondary am-radius">
                                                <i class="am-icon-cloud-upload"></i> 选择用户
                                            </button>
                                            <input type="hidden" class="user-id" name="coupon[user_id]" value="">
                                            <div class="user-list uploader-list am-cf">
                                                <div class="file-item">
                                                    <a href="" title="" target="_blank">
                                                        <img src="">
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="am-form-group">
                                    <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">分类/商品</label>
                                    <div class="am-u-sm-9 am-u-end">
                                        <label class="am-radio-inline">
                                            <input type="radio" name="coupon[type]" value="1" data-am-ucheck onchange="changetype(1)">
                                            分类
                                        </label>
                                        <label class="am-radio-inline">
                                            <input type="radio" name="coupon[type]" value="0" data-am-ucheck onchange="changetype(0)">
                                            商品
                                        </label>
                                        <div class="help-block">
                                            <small></small>
                                        </div>
                                    </div>
                                </div>
                                <div class="am-form-group" id="t_category" style="display: none">
                                    <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">商品分类 </label>
                                    <div class="am-u-sm-9 am-u-end">
                                        <select name="coupon[category_id]"
                                                data-am-selected="{searchBox: 1, btnSize: 'sm',
                                             placeholder:'请选择商品分类', maxHeight: 400}">
                                            <option value=""></option>
                                            <?php if (isset($category)): foreach ($category as $first): ?>
                                                <option value="<?= $first['category_id'] ?>">
                                                    <?= $first['name'] ?></option>
                                                <?php if (isset($first['child'])): foreach ($first['child'] as $two): ?>
                                                    <option value="<?= $two['category_id'] ?>">
                                                        　　<?= $two['name'] ?></option>
                                                    <?php if (isset($two['child'])): foreach ($two['child'] as $three): ?>
                                                        <option value="<?= $three['category_id'] ?>">
                                                            　　　<?= $three['name'] ?></option>
                                                    <?php endforeach; endif; ?>
                                                <?php endforeach; endif; ?>
                                            <?php endforeach; endif; ?>
                                        </select>
                                        <small class="am-margin-left-xs">
                                            <a href="<?= url('goods.category/add') ?>">去添加</a>
                                        </small>
                                    </div>
                                </div>
                                <div class="am-form-group" id="t_goods" style="display: none">
                                    <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require"> 选择商品 </label>
                                    <div class="am-u-sm-9 am-u-md-6 am-u-lg-5 am-u-end">
                                        <div class="am-form-file am-margin-top-xs">
                                            <button type="button"
                                                    class="j-selectGoods upload-file am-btn am-btn-secondary am-radius">
                                                <i class="am-icon-cloud-upload"></i> 选择商品
                                            </button>
                                            <div class="widget-goods-list uploader-list am-cf" style="display: none">
                                            </div>
                                        </div>
                                        <input type="text" id="goods_ids" name="coupon[goods_ids]" value="">
                                        <div class="help-block am-padding-top">
                                            <small></small>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <script>
                                var is_daijin = $("input[name='coupon[is_daijin]']:checked").val();
                                if(is_daijin == 1){
                                    $("#djq").show();
                                }else{
                                    $("#djq").hide();
                                }
                                function changedaijin(t){
                                    if(t==1){
                                        $("#djq").show();
                                    }else{
                                        $("#djq").hide();
                                    }
                                }

                                var djtype = $("input[name='coupon[dj_type]']:checked").val();
                                if(djtype == 1){
                                    $("#dj_goods").show();
                                    $("#dj_order").hide();
                                }else{
                                    $("#dj_goods").hide();
                                    $("#dj_order").show();
                                }
                                function changedjtype(t){
                                    if(t==1){
                                        $("#dj_goods").show();
                                        $("#dj_order").hide();
                                    }else{
                                        $("#dj_goods").hide();
                                        $("#dj_order").show();
                                    }
                                }

                                var type = $("input[name='coupon[type]']:checked").val();
                                if(type==1){
                                    $("#t_category").show();
                                    $("#t_goods").hide();
                                }else{
                                    $("#t_category").hide();
                                    $("#t_goods").show();
                                }
                                function changetype(t){
                                    if(t==1){
                                        $("#t_category").show();
                                        $("#t_goods").hide();
                                    }else{
                                        $("#t_category").hide();
                                        $("#t_goods").show();
                                    }
                                }
                            </script>


                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">优惠券颜色 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <label class="am-radio-inline">
                                        <input type="radio" name="coupon[color]" value="10" checked data-am-ucheck>
                                        蓝色
                                    </label>
                                    <label class="am-radio-inline">
                                        <input type="radio" name="coupon[color]" value="20" data-am-ucheck>
                                        红色
                                    </label>
                                    <label class="am-radio-inline">
                                        <input type="radio" name="coupon[color]" value="30" data-am-ucheck>
                                        紫色
                                    </label>
                                    <label class="am-radio-inline">
                                        <input type="radio" name="coupon[color]" value="40" data-am-ucheck>
                                        黄色
                                    </label>
                                </div>
                            </div>
                            <div class="am-form-group" data-x-switch>
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">优惠券类型 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <label class="am-radio-inline">
                                        <input type="radio" name="coupon[coupon_type]" value="10" checked
                                               data-am-ucheck
                                               data-switch-box="switch-coupon_type"
                                               data-switch-item="coupon_type__10">
                                        满减券
                                    </label>
                                    <label class="am-radio-inline">
                                        <input type="radio" name="coupon[coupon_type]" value="20"
                                               data-am-ucheck
                                               data-switch-box="switch-coupon_type"
                                               data-switch-item="coupon_type__20">
                                        折扣券
                                    </label>
                                </div>
                            </div>
                            <div class="am-form-group switch-coupon_type coupon_type__10">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">减免金额 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <input type="number" min="0.01" class="tpl-form-input" name="coupon[reduce_price]"
                                           value="" placeholder="请输入减免金额" required>
                                </div>
                            </div>
                            <div class="am-form-group switch-coupon_type coupon_type__20 hide">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">折扣率 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <input type="number" min="0" max="10" class="tpl-form-input"
                                           name="coupon[discount]"
                                           value="" placeholder="请输入折扣率" required>
                                    <small>折扣率范围0-10，9.5代表9.5折，0代表不折扣</small>
                                </div>
                            </div>
                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">最低消费金额 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <input type="number" min="1" class="tpl-form-input" name="coupon[min_price]"
                                           value="" placeholder="请输入最低消费金额" required>
                                </div>
                            </div>
                            <div class="am-form-group" data-x-switch>
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">到期类型 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <label class="am-radio-inline">
                                        <input type="radio" name="coupon[expire_type]" value="10" checked
                                               data-am-ucheck
                                               data-switch-box="switch-expire_type"
                                               data-switch-item="expire_type__10">
                                        领取后生效
                                    </label>
                                    <label class="am-radio-inline">
                                        <input type="radio" name="coupon[expire_type]" value="20"
                                               data-am-ucheck
                                               data-switch-box="switch-expire_type"
                                               data-switch-item="expire_type__20">
                                        固定时间
                                    </label>
                                </div>
                            </div>
                            <div class="am-form-group switch-expire_type expire_type__10">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">有效天数 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <input type="number" min="1" class="tpl-form-input" name="coupon[expire_day]"
                                           value="3" placeholder="请输入有效天数" required>
                                </div>
                            </div>
                            <div class="am-form-group switch-expire_type expire_type__20 hide">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">时间范围 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <input type="text" class="j-startTime am-form-field am-margin-bottom-sm"
                                           name="coupon[start_time]" placeholder="请选择开始日期" required>
                                    <input type="text" class="j-endTime am-form-field" name="coupon[end_time]"
                                           placeholder="请选择结束日期" required>
                                </div>
                            </div>
                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">发放总数量 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <input type="number" min="-1" class="tpl-form-input" name="coupon[total_num]"
                                           value="-1" required>
                                    <small>限制领取的优惠券数量，-1为不限制</small>
                                </div>
                            </div>
                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">排序 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <input type="number" min="0" class="tpl-form-input" name="coupon[sort]" value="100"
                                           required>
                                </div>
                            </div>
                            <div class="am-form-group">
                                <div class="am-u-sm-9 am-u-sm-push-3 am-margin-top-lg">
                                    <button type="submit" class="j-submit am-btn am-btn-secondary">提交
                                    </button>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 用户列表模板 -->
<script id="tpl-user-item" type="text/template">
    {{ each $data }}
    <div class="file-item">
        <a href="{{ $value.avatarUrl }}" title="{{ $value.nickName }} (ID:{{ $value.user_id }})" target="_blank">
            <img src="{{ $value.avatarUrl }}">
        </a>

        <input type="hidden" name="model[user_id]" value="{{ $value.user_id }}">
    </div>
    {{ /each }}
</script>

<!-- 商品列表 -->
<script id="tpl-goods-list-item" type="text/template">
    {{ each $data }}
    <div class="file-item">
        <a href="{{ $value.image }}" title="{{ $value.goods_name }}" target="_blank">
            <img src="{{ $value.image }}">
        </a>
        <input type="hidden" name="model[goods_id]" value="{{ $value.goods_id }}">
    </div>
    {{ /each }}
</script>

<script>
    /**
     * 时间选择
     */
    $(function () {
        var nowTemp = new Date();
        var nowDay = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0).valueOf();
        var nowMoth = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), 1, 0, 0, 0, 0).valueOf();
        var nowYear = new Date(nowTemp.getFullYear(), 0, 1, 0, 0, 0, 0).valueOf();
        var $startTime = $('.j-startTime');
        var $endTime = $('.j-endTime');

        var checkin = $startTime.datepicker({
            onRender: function (date, viewMode) {
                // 默认 days 视图，与当前日期比较
                var viewDate = nowDay;
                switch (viewMode) {
                    // moths 视图，与当前月份比较
                    case 1:
                        viewDate = nowMoth;
                        break;
                    // years 视图，与当前年份比较
                    case 2:
                        viewDate = nowYear;
                        break;
                }
                return date.valueOf() < viewDate ? 'am-disabled' : '';
            }
        }).on('changeDate.datepicker.amui', function (ev) {
            if (ev.date.valueOf() > checkout.date.valueOf()) {
                var newDate = new Date(ev.date)
                newDate.setDate(newDate.getDate() + 1);
                checkout.setValue(newDate);
            }
            checkin.close();
            $endTime[0].focus();
        }).data('amui.datepicker');

        var checkout = $endTime.datepicker({
            onRender: function (date, viewMode) {
                var inTime = checkin.date;
                var inDay = inTime.valueOf();
                var inMoth = new Date(inTime.getFullYear(), inTime.getMonth(), 1, 0, 0, 0, 0).valueOf();
                var inYear = new Date(inTime.getFullYear(), 0, 1, 0, 0, 0, 0).valueOf();
                // 默认 days 视图，与当前日期比较
                var viewDate = inDay;
                switch (viewMode) {
                    // moths 视图，与当前月份比较
                    case 1:
                        viewDate = inMoth;
                        break;
                    // years 视图，与当前年份比较
                    case 2:
                        viewDate = inYear;
                        break;
                }
                return date.valueOf() <= viewDate ? 'am-disabled' : '';
            }
        }).on('changeDate.datepicker.amui', function (ev) {
            checkout.close();
        }).data('amui.datepicker');
    });
</script>
<script src="assets/store/js/select.data.js?v=<?= $version ?>"></script>
<script>
    $(function () {
        // 选择用户
        $('.j-selectUser').click(function () {
            var $userList = $('.user-list');
            $.selectData({
                title: '选择用户',
                uri: 'user/lists_user',
                dataIndex: 'user_id',
                done: function (data) {
                    var user = [data[0]];
                    $('.user-id').val(user[0].user_id);
                    $userList.html(template('tpl-user-item', user));
                }
            });
        });

        // 选择商品
        var $goodsList = $('.widget-goods-list');
        $('.j-selectGoods').selectData({
            title: '选择商品',
            uri: 'goods/lists',
            dataIndex: 'goods_id',
            done: function (data) {
                data = [data[0]];
                var $html = $(template('tpl-goods-list-item', data));
                $goodsList.html($html);
            }
        });

        // swith切换
        var $mySwitch = $('[data-x-switch]');
        $mySwitch.find('[data-switch-item]').click(function () {
            var $mySwitchBox = $('.' + $(this).data('switch-box'));
            $mySwitchBox.hide().filter('.' + $(this).data('switch-item')).show();
        });

        /**
         * 表单验证提交
         * @type {*}
         */
        $('#my-form').superForm();

    });
</script>
